<template>
	<el-dialog :close-on-click-modal="false" :title="titleMap.show" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="140px" label-position="right">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="60分钟课时:" v-if="form.classHourType == 1">
                        {{ classHour60 }}
                    </el-form-item>
                    <el-form-item label="30分钟课时:" v-if="form.classHourType == 2">
                        {{ classHour30 }}
                    </el-form-item>
                    <el-form-item label="提示:">
                        <template v-if="form.classHourType == 1">
                            <div style="color: red;">1个60分钟课时可兑换2个30分钟课时，如兑换数量为1，60分钟课时会扣除1个，30分钟课时实际会增加2个。</div>
                        </template>
                        <template v-if="form.classHourType == 2">
                            <div style="color: red;">2个30分钟课时才能兑换1个60分钟课时，如兑换数量为1，30分钟实际会被扣除2个，60分钟课时会增加1个。</div>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="兑换数量" prop="classHour">
                        <el-input v-model="form.classHour" placeholder="请输入兑换数量"/>
                    </el-form-item>
                    <el-form-item label="验证密码:" prop="password">
                        <el-input type="password" v-model="form.password" placeholder="请输入密码"/>
                    </el-form-item>
                </el-col>
            </el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 认</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
        props: {
            classHour60: { type: Number, default: 0 },
            classHour30: { type: Number, default: 0 },
        },
		data() {
			return {
				mode: "add",
				titleMap: {
					show: '课时兑换'
				},
				visible: false,
				isSaveing: false,
                form: {
                    classHourType: "1",
                    classHour: "",
                    password: "",
                },
                rules: {
                    classHourType: [
                        { required: true, message: '请选择兑换类型', trigger: 'change' },
                    ],
                    classHour: [
                        { required: true, message: '请输入兑换数量', trigger: 'blur' },
                        { pattern: /^[1-9]\d*$/, message: '只能输入大于0的整数', trigger: 'blur'},
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                },
			}
		},
		mounted() {
		},
		methods: {
			//显示
			open(title, type){
                this.form = this.getDefaultRuleForm()
                if(title) {
                    this.titleMap.show = title
                }
                if(type) {
                    this.form.classHourType = type
                }
                this.visible = true;
				return this
			},
			async submit() {
                this.$refs.dialogForm.validate(async (valid) => {
                    if (!valid) {
					    return false;
				    }

                    if (this.form.classHourType == 1 && this.form.classHour > this.classHour60) {
                        this.$notify.error('最多只能兑换' + this.classHour60 + '个课时')
                        return false;
                    }else if (this.form.classHourType == 2 && this.form.classHour > this.classHour30) {
                        this.$notify.error('最多只能兑换' + this.classHour30 + '个课时')
                        return false;
                    }

                    this.isSaveing = true;
                    await this.$API.classHour.agentExchange.post(this.form).then(() => {
                        this.visible = false
                        this.$emit('success')
                        this.$notify.success('兑换成功')
                    }).finally(() => { this.isSaveing = false; })
                })
			},
            getDefaultRuleForm() {
                return {
                    classHourType: "1",
                    classHour: "",
                    password: "",
                }
            }
		}
	}
</script>

<style scoped>
.elHeight{
	height: 35px;
}
</style>
